<template>
    <el-dialog title="申请铸币" :visible.sync="dialogTableVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="申请类型" prop="resource">
          <el-radio-group v-model="ruleForm.resource"   @change='queryCriteria'  >
            <el-radio label="1">一对一铸币</el-radio>
            <el-radio label="2">一对多铸币</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="品类名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="DAW名称" prop="DAWname">
          <el-input v-model="ruleForm.DAWname"></el-input>
        </el-form-item>
  
        <el-form-item
          label="铸币数量"
          prop="toMintNum"
          v-if="ruleForm.resource == 2"
        >
          <el-input v-model="ruleForm.toMintNum"></el-input>
        </el-form-item>
  
        <el-form-item label="铸币数量" v-if="ruleForm.resource == 1">
          <el-input
            :disabled="true"
            :value="fileList.length == 1 ? '' : fileList.length"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="ruleForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="选择源文件">
          <el-button type="primary" @click="openDocumentsList"
            >选择源文件</el-button
          >
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList"
            list-type="picture"
            disabled
  
          >
          </el-upload>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >申请铸币</el-button
          >
        </el-form-item>
      </el-form>
  
      <el-dialog
        width="50%"
        title="源文件选择"
        :visible.sync="innerVisible"
        append-to-body
       
      >
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="dataList"
          tooltip-effect="dark"
          style="width: 100%"
          @select="selectRow"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column width="55"> </el-table-column>
          <el-table-column  prop="fileName" label="文件名称" width="120">
            <!-- <template slot-scope="scope">{{ scope.row.fileName }}</template> -->
          </el-table-column>
          <el-table-column label="属性" width="120">
            <template slot-scope="scope">
              <div>{{ ['图片', '音频','视频','3D模型','文件'][scope.row.type-1] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="大小(kb)" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="filePath" label="url地址" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="url" width="230" label="缩略图">
            <template slot-scope="scope">
              <img style="width: 40px; height: 40px" :src=" 'https://uat-minio.dtbcart.com'  +   scope.row.filePath" />
            </template>
          </el-table-column>
  
          <el-table-column prop="describe" label="描述" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="queding">确定选择</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </template>
  <script>
  import { forEach } from 'element-resize-detector/src/collection-utils';
  export default {
    data() {
      return {
        loading: true,
        innerVisible: false,
        dialogTableVisible: false,
        ruleForm: {
          resource: "1", //铸币类型
          name: "", //名称
          DAWname: "", //Daw名称
          toMintNum: "", //铸币数量
          remarks: "", //备注
        },
        rules: {
          name: [{ required: true, message: "请输入品类名称", trigger: "blur" }],
          DAWname: [
            { required: true, message: "请输入DAW名称", trigger: "blur" },
          ],
          toMintNum: [
            { required: true, message: "请输入铸币数量", trigger: "blur" },
          ],
          resource: [
            { required: true, message: "请选择铸币类型", trigger: "change" },
          ],
        },
        //   文件上传列表
        fileList: [],
  
        list: "", // 选中的数据
        dataList: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条,
        },
      };
    },
  
    mounted() {
      
    },
    methods: {
  
      queryCriteria (val) {
         this.fileList = [];
      },
  
      /**
        列表加载
       */
      getDataList(page) {
        this.pageLoading = true;
        this.$http({
          url: this.$http.adornUrl(
            `/m/source_file/page?current=${this.page.currentPage}&size=${this.page.pageSize}`
          ),
          method: "get",
        }).then(({ data }) => {
          data.records.forEach(function(item) {
            item.name = item.fileName;
            item.url = "https://uat-minio.dtbcart.com" + item.filePath
          })
          console.log(data.records);
          this.dataList = data.records;
          this.page.total = data.total;
          this.dataListLoading = false;
          this.loading = false;
        });
      },
  
      queding() {
  
        console.log(this.fileList);
  
        if(this.fileList.length ==  0 ) {
          this.$message('请选择源文件');
          return false;
        }
        // this.fileList = this.list;
        this.innerVisible = false;
      },
  
      // handleRemove(file, fileList) {
      //   this.fileList = fileList;
      // },
  
      //选中当前行的数据
      handleSelectionChange(val) {
        //     this.list = val;
        //   if(ruleForm.resource == 1) {
        //     this.fileList = [] ;
        //     this.fileList = val;
        //   } else {
        //     this.fileList = val;
        //   }
        //   console.log(val);
      },
  
      selectRow(val, row) {
        if (this.ruleForm.resource == 2) {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleRowSelection(row, true);
          this.fileList = [row];
          console.log(val)  //选中的数据
          console.log(row);  //当前选择的
          console.log(this.fileList)
        } else {
          this.fileList = val;
        }
      },
  
      init() {
        this.dialogTableVisible = true;
      },
  
      //选择源文件
      openDocumentsList() {
  
        this.getDataList(this.page);   //源文件加载
        this.innerVisible = true;
      },
      submitForm(formName) {
        let array = [];
        if(this.fileList.length == 0) {
          this.$message('请选择源文件');
          return false;
        }   
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fileList.forEach(function(item){
              console.log(item.filePath);
              array.push(item.filePath)
            })  
            console.log(array);
            var data = {
              denomName: this.ruleForm.name, //品类名称
              dawName: this.ruleForm.DAWname, // 名称：
              type: this.ruleForm.resource, //1对1 --1 1对多 --2
              nftNum: this.ruleForm.resource == 2 ? this.ruleForm.toMintNum : this.fileList.length , //数量
              imgUrl:array, // 图片
            };
            this.$http({
              url: this.$http.adornUrl("/p/nftapply/saveNftApply"),
              method: "post",
              // data: this.$http.adornData(this.dataForm)
              data: data,
            }).then(({ data }) => {
              this.$message({
                message: '申请铸币成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                 this.dialogTableVisible = false;
                 this.$emit('refreshDataList', this.page)
                 this.fileList = [];
                }
              })
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
  </script>
  <style>
  </style>